<template>
  <div>
    <demo-component
      name="确认型弹窗"
      :codeStr="codeStr1">>
      <template v-slot:code>
        <div class="dialog-wrapper">
          <h-button
            text="显示dialog"
            @btnClick="state.isConfirmShowDialog = true" />
          <h-dialog
            :show="state.isConfirmShowDialog"
            @dialogClick="state.isConfirmShowDialog = false"
          >
            <div class="dialog-center flex-all-center">这是一个dialog弹窗</div>
          </h-dialog>
        </div>
      </template>
    </demo-component>
    <demo-component
      name="说明型弹窗"
      :codeStr="codeStr2">>
      <template v-slot:code>
        <div class="dialog-wrapper">
          <h-button
            text="显示dialog"
            @btnClick="state.isExplainShowDialog = true" />
          <h-dialog
            title="活动规则"
            type="explain"
            :show="state.isExplainShowDialog"
            @dialogClick="state.isExplainShowDialog = false"
          >
            <div class="dialog-explain-center flex-all-center">这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗这是一个dialog弹窗</div>
          </h-dialog>
        </div>
      </template>
    </demo-component>
  </div>
</template>
<script>
import { reactive } from 'vue'
import DemoComponent from './demo-component.vue'
export default {
  setup () {
    const state = reactive({
      isConfirmShowDialog: false,
      isExplainShowDialog: false
    })
    return {
      state
    }
  },
  data () {
    return {
      codeStr1: `<h-dialog :show="state.isConfirmShowDialog"
            @dialogClick="state.isConfirmShowDialog = false">
          <div class="dialog-center flex-all-center">这是一个dialog弹窗</div>
        </h-dialog>`,
      codeStr2: `<h-dialog type="explain"
            :show="state.isExplainShowDialog"
            @dialogClick="state.isExplainShowDialog = false"
          >
          <div class="dialog-center flex-all-center">这是一个dialog弹窗</div>
        </h-dialog>`
    }
  },
  props: {
  },
  methods: {
    onBtnClick (e) {
      console.log('e>>>', e);
    }
  },
  computed: {
  },
  components: {
    DemoComponent
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
};
</script>
<style>
.dialog-center {
  width: 100%;
  height: 100px;
  background: #fff;
}
.dialog-explain-center {
  margin-top: 20px;
  width: 100%;
  height: 85%;
  overflow-y: scroll;
  background: #fff;
}
</style>
